<template>
  <el-select v-model="brandId" @change="brandChange" filterable clearable>
    <el-option v-for="item in brands" :label="item.name" :value="item.brandId" :key="item.brandId"/>
  </el-select>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      brandId: this.value,
      brands: []
    }
  },
  methods: {
    // 获取分类对应的品牌列表
    getBrands(catId) {
      this.brands = []
      if (catId) {
        this.$api.get('/product/brand/listByCatId/' + catId).then(({ data }) => {
          if (data.length) {
            this.brands = data
          } else {
            this.$modal.msgWarning('该分类下没有对应的品牌')
          }
        })
      }
    },
    clear() {
      this.brands = []
    },
    brandChange(val) {
      this.$emit('change', val)
    }
  },
  props: {
    value: [String, Number]
  },
  watch: {
    value(val) {
      this.brandId = val
    }
  }
}
</script>

<style scoped>

</style>
